@mixin clearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

@mixin scrollBar {
  &::-webkit-scrollbar-track-piece {
    background: #d3dce6;
  }

  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background: #99a9bf;
    border-radius: 20px;
  }
}

@mixin relative {
  position: relative;
  width: 100%;
  height: 100%;
}

// dialog button dafault
@mixin common-button-default($color) {

  &:hover {
    border: 1px solid $--color-primary !important;
  }

  [common-button-default="theme-button-default"] & {
    background-color: var(--gc-element) !important;
    border: 1px solid var(--gc-element);

    &:hover {
      background-color: var(--gc-element) !important;
    }
  }
}

// dialog header  bg
@mixin common-bg($color) {
  background: $color;
  background-color: $color;

  [common-bg="theme-bg"] & {
    background: var(--gc-bg);
    background-color: var(--gc-bg);
  }
}

@mixin common-container-bg($color) {
  background: $color;
  background-color: $color;

  [common-container-bg="theme-inner-bg"] & {
    background: var(--gc-theme);
    background-color: var(--gc-theme);
  }
}

// dialog input bg 
@mixin common-input-bg($color) {
  background-color: $color;

  [common-bg="theme-bg"] & {
    background-color: var(--gc-bg);
  }
}

// white bg，switch
@mixin common-white-bg($color) {
  background: $color;
  background-color: $color;

  [common-white-bg="theme-white-bg"] & {
    background: $gc-color-white;
    background-color: $gc-color-white;
  }
}

// hover
@mixin common-hover($color) {
  background-color: $color;
  cursor: pointer;
  border-bottom: $color;

  [common-hover="theme-hover"] & {
    cursor: pointer;
    background-color: var(--gc-element-hover) !important;
    color: $gc-color-white !important;
  }
}

// span
@mixin common-span-color($color) {
  color: $color;

  [common-span-color="theme-span-color"] & {
    color: $gc-color-white;
  }
}

// top layout header
@mixin common-header-bg ($color) {
  background: $color;
  background-color: $color;

  [common-header-bg="theme-header-bg"] & {
    background: var(--gc-theme) !important;
    background-color: var(--gc-theme) !important;
  }
}

// teble border
@mixin common-border($color) {
  border: 1px solid $color;

  [common-border="theme-border"] & {
    border: none;
  }
}

@mixin common-component-header-bg($color) {
  background-color: $color;

  [common-component-header-bg="theme-table-header-bg"] & {
    background-color: var(--gc-header-menu-bg);
  }
}

@mixin common-dialog-scrollbar() {
  [common-dialog-scrollbar="theme-dialog-scrollbar"] & {
    .el-dialog {
      position: relative;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      width: 49%;
    }
    .el-dialog__body {
      overflow-y: auto;
      //如需设置滚动条样式
      &::-webkit-scrollbar {
        width: 8px;
      }
      &::-webkit-scrollbar-thumb {
        background-color: var(--gc-scroll);
      }
      &::-webkit-scrollbar-track {
        background-color: var(--gc-main-bg);
      }
    }
  }
}

@mixin common-router-tab-active-border-top($color){
  border-top: 2px solid $color;
  [common-router-tab-active-border-top="theme-router-tab-active-border-top"] & {
      border-top: 2px solid var(--gc-router-tab-active-border-top);
  }
}
